<template>
	<view class="bgWhite plr-24 pt-20 pb-40 radius-16">
		<view class="">

			<view class="listClass" v-if="dataInfo.list.length > 0">
				<view v-for="(item, index) in dataInfo.list" :key="index" @click.stop="handleItem"
					class="itemClass pointer relative radius-16 hidden">
					<view class="flex" @click="addOpen(`/pages/mine/veinManDetails?flag=hot1`)">
						<!-- hot1 hot2 -->
						<uv-image :src="item.synthesisImg" width="315rpx" height="420rpx"></uv-image>
					</view>
					<view class="bgMinor5 flex pd-16">
						<view class="flex flex-1">
							<uv-image :src="item.avatar" width="32rpx" height="32rpx" shape="circle"></uv-image>
							<view class="size-15 ml-16 color-black3 line-hiding-1 flex-1">{{dataInfo.userName}}</view>
						</view>
						<view class="flex">
							<!-- mode="scaleToFill"  v-if="index === 0"-->
							<uv-image @click="addOpen(`/pages/homepage/customization?id=` + item.id )"
								src="/static/images/shiyongtongkuan1.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image>
							<!-- 	<uv-image v-else @click="addOpen('/pages/homepage/customization')"
								src="/static/images/shiyongtongkuan.png" width="98rpx" height="32rpx"
								mode="scaleToFill"></uv-image> -->
						</view>
					</view>
				</view>
			</view>

			<view class=" mt-40" v-else>
				<view
					style="font-size: 30rpx;color: rgb(204, 204, 204);height: 70vh;display: flex;align-items: center;justify-content: center;width: 100%;">
					暂 无 数 据</view>
			</view>


			<view v-if="!dataInfo.hasMoreData"
				style="font-size: 30rpx;width: 100%;text-align: center;  color: rgb(204, 204, 204);height: 25vh;display: flex;align-items: center;justify-content: center;width: 100%;">
				没有更多数据了</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { getWindowHeight } from '@/pages/util/getHeight';
	import { onShow, onReachBottom } from '@dcloudio/uni-app';
	import { addOpen, loggedIn, addOpenTab } from '@/pages/util/hooks';
	import useLoginStore from '@/pinia-store/userInfoStore';
	import { get, post } from '@/utils/request';
	const useLogin = useLoginStore();
	// console.log('useLoginuseLogin',useLogin);
	/** @name 数据 */
	const dataInfo = reactive({
		username: '',
		password: '',
		captcha: '',
		list: [],
		hasMoreData: true,
		isLoading: false,
		total: 0,
		pages: 0,
		pageNo: 1,
		userName: JSON.parse(sessionStorage.getItem('userData')).username
	});
	const listFun = async () => {
		try {
			const response = await get<{
				pageNo : Number,
				pageSize : Number,
				type : Number;
			}>('customized/getPopularList', {pageNo: dataInfo.pageNo, pageSize: 10,  type: 3 });
			if (response) {
				dataInfo.pages = response.result.pages
				dataInfo.total = response.result.total
				dataInfo.list = [...dataInfo.list, ...response.result.records]
			}

		} catch (error) {
			console.error(error);
		}
	};
	onReachBottom(() => {
		alert('11')
		if (!dataInfo.isLoading && dataInfo.hasMoreData) {
			console.log(dataInfo.pageNo + '----' + dataInfo.pages)

			if (dataInfo.pageNo < dataInfo.pages) {
				dataInfo.pageNo++;
				listFun()
			} else {
				dataInfo.hasMoreData = false
				setTimeout(() => {
					dataInfo.hasMoreData = true
				}, 800)
			}

			// this.fetchData();
		}
	})
	onShow((options : any) => {
		dataInfo.list = []
		listFun()
	})
	/** @name xxx */
	function getUserInfo() { }

	/** @name 热门的选中事件 */
	async function handleItem() { }
</script>

<style scoped lang="scss">
	// :deep(.checklist-box) {
	// 	//  模版
	// }
	.listClass {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 分为三列，每列宽度相等 */
		gap: 24rpx;
	}
</style>